/**
 * Created by Administrator on 2017/07/10 0010.
 */

import React from 'react'
import {View,Image,TouchableOpacity,Text,FlatList,ScrollView} from 'react-native';

import Swiper from 'react-native-swiper'
let tabImg5 = require('../Img/999.png')
let searchImg = require('../Img/icon_home_search.png')
let headerBg = require('../Img/icon_header_bg.png')
let headerMsg = require('../Img/icon_message.png')

let menuCate = require('../Img/icon_home_cate.png')
let menuSa0 = require('../Img/btn_saoyisao.png')
let menuBuy = require('../Img/btn_gongxianggouwu.png')
let menuZu = require('../Img/btn_gongxiangzuyong.png')
import RequestUtils from '../Common/NetUtils'
export default class HomePage extends React.Component{

    static navigationOptions = ({navigation}) =>({
        headerStyle:{
            height:0
        }
    })

    constructor(props){
        super(props);
        this.state={
            imgTypes: [],
            swiperShow:false,
            hotData :[],
        }
    }

    componentDidMount(){

        // this._fetchBannerData()
        // this._fetchHotData();

    }

    render(){
        let S = this._renderSwiper();
        let search = this._renderSearch();
        let menu = this._renderMenu();
        return(
            <View style={{width:'100%',height:'100%', backgroundColor:'#fff'}} >
                {search}
                <ScrollView>
                    {S}
                    {menu}
                    <FlatList
                        style={{width:'100%',height:'100%',backgroundColor:'#fff'}}
                        data={this.state.hotData}
                        numColumns ={2}
                        renderItem={({item}) =>this._renderHotItem(item)}/>
                </ScrollView>
            </View>

        )
    }

    _renderMenu(){
        return(
            <View style={{width:'100%',height:116,flexDirection:'row'}}>
                <TouchableOpacity style={{width:'25%',height:116,alignItems:'center',flexDirection:'column'}}
                                  onPress={()=>this.props.navigation.navigate('cateGory')}>
                    <Image style={{width:52,height:52,marginTop:24}} source={menuCate}/>
                    <Text>分类</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width:'25%',height:116,alignItems:'center'}}
                                  onPress={()=>this.props.navigation.navigate('defaultScreen')}>
                    <Image style={{width:52,height:52,marginTop:24}} source={menuSa0}/>
                    <Text>扫一扫</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width:'25%',height:116,alignItems:'center'}}
                                  onPress={()=>this.props.navigation.navigate('goodsList',{GoodsType:'share'})}>
                    <Image style={{width:52,height:52,marginTop:24}} source={menuBuy}/>
                    <Text>共享购物</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width:'25%',height:116,alignItems:'center'}}
                                  onPress={()=>this.props.navigation.navigate('goodsList',{goodsType:'rent'})}>
                    <Image style={{width:52,height:52,marginTop:24}} source={menuZu}/>
                    <Text>共享租用</Text>
                </TouchableOpacity>
            </View>
        )
    }

    _renderSearch(){
        return(
            <View style={{width:'100%',height:45,backgroundColor:'#40CCCB',flexDirection:'row',justifyContent:'space-around'}}>
                <View style={{width:25,height:25,alignItems:'center'}}/>
                <View style={{width:285,borderRadius:15,height:29,marginTop:8,marginBottom:8,backgroundColor:'#84d1d7',justifyContent:'center'}}>
                    <Image style={{width:17,height:17,marginLeft:12}} source={searchImg}/>
                </View>
                <Image style={{width:21,height:21,alignSelf:'center'}} source={headerMsg}/>
            </View>
        )
    }

    _renderSwiper(){
        let bannerData =[];
        for(let i=0;i<this.state.imgTypes.length;i++){
            bannerData.push(<Image style={{width:'100%',height:200}} source={{uri:this.state.imgTypes[i].imgUrl}}></Image>)
        }
        if(this.state.swiperShow){
            return(
                <Swiper
                    index={0}
                    autoplay={true}
                    loop={true}
                    height={157}
                    autoplayTimeout={3}
                    showsButtons={false}
                >
                    {bannerData}

                </Swiper>
            )
        }else{
            return(<View></View>)
        }
    }

    _renderHotItem(item){
        return(
            <TouchableOpacity style={{width:'47%',height:129, margin:6,justifyContent:'center',alignItems:'center',backgroundColor:'#222',opacity:0.5}}
                              onPress={()=>this.props.navigation.navigate('goodsDetails',{details:item})}>
                <Image style={{width:'100%',height:129,justifyContent:'center',alignItems:'center'}} source={{uri:item.img}}>
                    <Text style={{ color:'#fff',fontSize:16,opacity:2}}>{item.shopName}</Text>
                </Image>
            </TouchableOpacity>

        )
    }

    _fetchBannerData(){
        //let params = {'start':'0',limit:'20','isNeedCategory': true, 'lastRefreshTime': '2016-09-25 09:45:12'};
        RequestUtils.getData('http://sharebox.wenweikeji.com/api/home/banner','',(result)=>{
            this.setState({imgTypes:result.data,swiperShow:true})
        })
    }

    _fetchHotData(){
        RequestUtils.getData('http://sharebox.wenweikeji.com/api/home/getSaleTop8','',(result) =>{
            this.setState({hotData:result.data})
        })
    }
}